<template>
  <div id="updatauser">
    <Header goback="true" headerTitle="修改用户名"></Header>
    <div class="update-content">
      <el-input
        type="text"
        placeholder="输入用户名"
        v-model="text"
        maxlength="24"
        minlength="4"
        show-word-limit
        :class="{ 'update-text': true, 'update-none': updateNone }"
        @input="changeInput"
      >
      </el-input>
      <p v-if="!note">用户名只能修改一次(5-24字符之间)</p>
      <p class="shuomi" v-else>用户名长度5-24位之间)</p>
      <div class="sub-outer">
        <el-button
          :class="['sub', { 'sub-focus': subFocus }]"
          @click="subUpdate"
          >确认修改</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../../../components/header/header";
export default {
  data() {
    return {
      text: "",
      note: false,
      updateNone: false,
      isChange: true,
      changeNum: "",
      subFocus: false,
    };
  },
  components: {
    Header,
  },
  methods: {
    // 监听用户输入
    // 展示提示语
    changeInput() {
      if (this.isChange) {
        this.isChange = false;
        this.changeNum = setTimeout(() => {
          // console.log(this);
          let num = this.text.length;
          if (num < 4 || num > 24) {
            this.note = true;
            this.updateNone = true;
          } else {
            this.note = false;
            this.updateNone = false;
          }
          this.isChange = true;
        }, 1000);
      }
    },
    subUpdate(event) {
      console.log(event);
      // let target = event.target;
      // if (target.nodeName == "SPAN") {
      //   target = event.target.parentNode;
      // }
      // target.blur();
      console.log(this);
      this.subFocus = true;
    },
  },
};
</script>

<style lang="scss" scoped>
//引入公告模块
@import "../../../../style/mixin";
#updatauser {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  @include wh(100%, 100%);
  background: #f2f2f2;
}
.update-content {
  padding-top: 1.95rem;
}
p {
  @include sc(0.4rem, #666666);
  padding-left: 0.4rem;
}
.shuomi {
  // color: red;
  @include sc(0.65rem, red);
}
.sub-outer {
  width: 100%;
  padding: 0 0.4rem;
  margin-top: 1.2rem;
}
</style>
<style lang="scss" >
.update-content {
  .update-text {
    padding: 0.3rem 0.4rem;
    .el-input__inner {
      color: black;
      background: #f2f2f2;
      height: 2rem;
      font-size: 0.6rem;
    }
  }
  .update-none {
    .el-input__inner {
      border: 0.001rem solid red;
    }
  }
  .el-input__inner::placeholder {
    font-size: 0.75rem;
    color: #666666;
  }
  .el-input__inner::-webkit-input-placeholder {
    font-size: 0.75rem;
    color: #666666;
  }
  .el-input__inner::-moz-placeholder {
    font-size: 0.75rem;
    color: #666666;
  }
  .el-input__inner::-ms-input-placeholder {
    font-size: 0.75rem;
    color: #666666;
  }

  .el-input__suffix {
    right: 0.55rem;
    .el-input__count-inner {
      background: #f2f2f2;
    }
  }
}
.sub {
  width: 100%;
  height: 2rem;
  background: #3190e8;
  span {
    color: white;
  }
}
.sub-outer {
  .sub-focus {
    background: #3190e8;
    border: 0.05rem solid #dcdfe6;
  }
}
</style>

